<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        perspective: 800px;
    }
    .cube{
        width: 200px;
        height: 200px;
        background-color: #bfa;
        margin: 100px auto;
        transform-style: preserve-3d;
        /*transform: rotateX(45deg) rotateZ(45deg);*/
        animation: rotate 10s linear infinite;
    }
    .cube > div{
        width: 200px;
        height: 200px;
        opacity: 0.7;
        position: absolute;
    }
    img{
        vertical-align: top;
    }
    .box1{
        transform: rotateY(90deg) translateZ(100px);
    }
    .box2{
        transform: rotateY(-90deg) translateZ(100px);
    }
    .box3{
        transform: rotateX(90deg) translateZ(100px);
    }
    .box4{
        transform: rotateX(-90deg) translateZ(100px);
    }
    .box5{
        transform: rotateY(180deg) translateZ(100px);
    }
    .box6{
        transform: rotateY(0deg) translateZ(100px);
    }

    @keyframes rotate {
        from{
            transform:  rotateX(0deg) rotateY(0deg);
        }
        to{
            transform:  rotateX(360deg) rotateY(360deg);
        }
    }
</style>
<body>
<div class="cube">
    <div class="box1">
        <img src="./img/1.jpg" alt="">
    </div>
    <div class="box2">
        <img src="./img/2.jpg" alt="">
    </div>
    <div class="box3">
        <img src="./img/3.jpg" alt="">
    </div>
    <div class="box4">
        <img src="./img/4.jpg" alt="">
    </div>
    <div class="box5">
        <img src="./img/5.jpg" alt="">
    </div>
    <div class="box6">
        <img src="./img/6.jpg" alt="">
    </div>
</div>

</body>
</html>
